<template>
    <div>
        <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
        <r-table :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>
        <!-- <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="100px" dialogWidth="500px" :isHandle="true" /> -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            searchData: {
                orderNo: '',
                nickName: '',
                createdTime: ''
            },
            searchForm: [
                {
                    type: 'input',
                    prop: 'orderNo',
                    placeholder: '订单编号',
                    width: 150
                },
                {
                    type: 'input',
                    prop: 'nickName',
                    placeholder: 'IC卡号',
                    width: 150
                },
                {
                    type: 'date',
                    prop: 'createdTime',
                    placeholder: '提交时间',
                    width: 170,
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.init()
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset()
                },
                // {
                //     label: "导出Excel",
                //     icon: 'el-icon-download',
                //     type: "success",
                //     loading: false,
                //     handle: (that) => this.handleDownload(),
                // },
            ],
            tableData: [

            ],
            tableCols: [
                {
                    label: '订单编号',
                    prop: 'orderNo',
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '提交时间',
                    prop: 'createdTime'
                },
                {
                    label: 'IC卡号',
                    prop: 'cardNumber'
                },
                {
                    label: '充值方式',
                    prop: 'channel',
                    formatter: e => e.channel == 0 ? '线上' : e.channel == 1 ? '线下' : e.channel == 2 ? '系统充值' : ''
                },
                {
                    label: '充值金额',
                    prop: 'topupMoney'
                },
                {
                    label: '支付方式',
                    prop: 'pay_type',
                    formatter: e =>  e.payType == 1 ? "微信支付" : e.payType == 2 ? '支付宝支付' : e.payType == 3 ? '现金' : ''
                },
                {
                    label: '订单状态',
                    prop: 'state',
                    theme: e => e.state == 27 ? 'primary' : 'danger', type: "tag",
                    formatter: e => e.state == 26 ? '充值失败' : e.state == 27 ? '充值成功' : '',

                },
                {
                    label: '操作',
                    type: "button",
                    btnList: [
                        {
                            label: '订单详情',
                            type: 'primary',
                            // isShow: e => e.orderId == '123' ? true : false,
                            handle: (row) => this.goDetail(row.id)
                        }
                    ]
                }
            ],
            tablePage: { limit: 10, page: 1, total: 0 },

        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            let parm = { ...this.searchData, ...this.tablePage }
            let res = await this.api.rechargeList(parm)
            if (res) {
                this.tablePage.total = res.data.total
                this.tableData = res.data.list
            }
        },
        //查询
        elFormSubmit() {

        },
        goDetail(id) {
            this.$router.push({ path: '/order-ICardTopup_Detail', query: { id } })
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                // if (j === 'connectedStatus') {
                //     return v[j] == 1 ? "在线" : "离线"
                // } else if (j === 'status') {
                //     return v[j] == 1 ? "正常" : v[j] == 2 ? "设备维护中" : "未激活"
                // } else {
                return v[j]
                // }
            }))
        },
    }
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}
</style>
